<script setup>/**
 *
 * @param type {String} 标签类型 primary success warning danger info
 * @param size {String} 标签大小 medium small mini
 * @param closable {Boolean} 是否可关闭 boolean
 * */
import {computed} from "vue";

defineOptions({
  name: 'AeTag'
})
const props = defineProps({
  type: {
    type: String,
    default: 'primary'
  },
  size: {
    type: String,
    default: 'default'
  },
  closable: {
    type: Boolean,
    default: false
  },
  theme: {
    type: String,
    default: "light"
  }
})
const classes = computed(() => {
  const prefixCls = 'ae-tag'
  const { type, size, theme } = props
  return {
    [prefixCls]: true,
    [`${prefixCls}-${type}`]: type,
    [`${prefixCls}-size-${size}`]: size,
    [`${prefixCls}-${theme}`]: theme

  }
})

</script>

<template>
  <div :class="classes">
    <div class="ae-tag-content">
      <slot></slot> <span v-if="closable">x</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ae-tag {
  display: inline-block;
  box-sizing: border-box;
  height: 32px;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 0 8px;
  border: 1px solid #bdbdbd;
  color: #5b5b5b;
  font-size: 14px;
  box-shadow: #bdbdbd 0 0 1px;
  .ae-tag-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}
@mixin tag_size($size, $font_size, $height, $padding) {
  .ae-tag-size-#{$size} {
    font-size: $font_size;
    height: $height;
    padding: $padding;
  }
}
@include tag_size(small, 12px, 24px, 0 4px);
@include tag_size(medium, 14px, 32px, 4px 8px);
@include tag_size(mini, 10px, 20px, 0 2px);

@mixin tag_style_stauts($theme, $name, $background_color, $border, $color: #FFFFFF, $shadowColor) {
  .ae-tag-#{$theme}.ae-tag-#{$name} {
    background-color: $background_color;
    border: $border;
    box-shadow: $shadowColor 0 0 1px;
    color: $color;
  }
}
@include tag_style_stauts(light, info, #f5f5f5, 1px solid #bdbdbd, #5b5b5b, #bdbdbd);
@include tag_style_stauts(dart, info, #b7b6b6, 1px solid #bdbdbd, #FFFFFF, #bdbdbd);
@include tag_style_stauts(plain, info, #ffffff, 1px solid #bdbdbd, #5b5b5b, #bdbdbd);

@include tag_style_stauts(light, primary, #e0f0ff, 1px solid #249CFF, #249CFF, #249CFF);
@include tag_style_stauts(dart, primary, #249CFF, 1px solid #249CFF, #ffffff, #249CFF);
@include tag_style_stauts(plain, primary, #ffffff, 1px solid #249CFF, #249CFF, #249CFF);

@include tag_style_stauts(light, success, #edffe5, 1px solid #64C849, #64C849, #64C849);
@include tag_style_stauts(dart, success, #64C849, 1px solid #64C849, #ffffff, #64C849);
@include tag_style_stauts(plain, success, #ffffff, 1px solid #64C849, #64C849, #64C849);

@include tag_style_stauts(light, danger, #fff0f0, 1px solid #ffafaf, #F54141, #ffafaf);
@include tag_style_stauts(dart, danger, #F06464, 1px solid #F06464, #ffffff, #F06464);
@include tag_style_stauts(plain, danger, #ffffff, 1px solid #F54141, #F54141, #F54141);

@include tag_style_stauts(light, warning, #fff4e9, 1px solid #d59500, #d59500, #E6B750);
@include tag_style_stauts(dart, warning, #E6B750, 1px solid #E6B750, #ffffff, #E6B750);
@include tag_style_stauts(plain, warning, #ffffff, 1px solid #d59500, #d59500, #E6B750);

</style>